<!-- checkbox-group -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { findComponentsDownward } from '@/utils/assist.js'
import Emitter from '@/mixins/emitter'
export default {
  name: 'iCheckboxGroup',
  mixins: [Emitter],
  props: {
    value: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      currentValue: this.value,
      childrens: []
    }
  },
  methods: {
    // 是否更新
    updateModel(update) {
      // 找出下级所有的iCheckbox
      this.childrens = findComponentsDownward(this, 'iCheckbox')


      if (this.childrens) {
        const { value } = this
        // 把CheckboxGroup 的value,赋值给 Checkbox 的model,并根据Checkbox 的 label设置一次当前 Checkbox 的选中状态
        // 这样无论是由内而外选择，或由外向内修改数据，都是双向绑定的，而且支持动态增加 Checkbox 的数量。
        this.childrens.forEach(child => {

          child.model = value;


          if (update) {
            child.currentValue = value.indexOf(child.label) >= 0;
            child.group = true;
          }
        })

      }

    },
    change(data) {
      this.currentValue = data
      this.$emit('input', data)
      this.$emit('on-change', data)
      this.dispatch('iFormItem', 'on-form-change', data)
    }
  },
  watch: {
    value() {
      this.updateModel(true)
    }
  },
  mounted() {
    this.updateModel(true);
  }
}
</script>

<style lang="less" scoped>
</style>